<template>
	<div class="home-container layout-pd">
		<el-row style="margin-top: 0px">
			<el-col :span="24">
				<div style="background-image: url('/src/assets/search_bg.png'); width: 100%; height: 184px; padding: 25px 15px">
					<div class="search-left">
						<div class="welcome">您好，欢迎使用企迹平台！</div>
						<div class="vip">会员结束日期：2024年12月02日</div>
					</div>
					<div class="search-right">
						<div class="title">产业链高质量发展服务平台(五图、五库、五池)</div>
						<div class="vip">
							<el-input v-model="input2" placeholder="检索关键信息" :prefix-icon="Search" clas="search-input">
								<template #append>
									<el-button type="primary">搜索</el-button>
								</template>
							</el-input>
						</div>
						<div class="keywords">
							地区&nbsp;&nbsp;&nbsp;&nbsp;园区&nbsp;&nbsp;&nbsp;&nbsp;企业&nbsp;&nbsp;&nbsp;&nbsp;项目&nbsp;&nbsp;&nbsp;&nbsp;投资公司
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="10">
			<el-col :span="8">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/clue.png" /></div>
							<div class="title">今日线索</div>
							<div class="remind">11112</div>
							<el-link :underline="false" style="float: right" href="/#/chain/clue"><div class="more"></div></el-link>
						</div>
					</template>
					<div class="content">
						<li>
							<div class="list">
								<div class="drop-new"></div>
								<div class="topic">化工</div>
								<div class="title">上海市化工研究院天地科技发展公司</div>
								<div class="cl"></div>
							</div>
							<div class="description mf10">
								<div class="address">上海市-漕河泾开发区</div>
								<div class="line">|</div>
								<div class="time">2024年8月1日 12:30</div>
							</div>
						</li>
						<li>
							<div class="list">
								<div class="drop-new"></div>
								<div class="topic">广电</div>
								<div class="title">江苏华晨光电显示科技股份有限公司</div>
								<div class="cl"></div>
							</div>
							<div class="description mf10">
								<div class="address">上海市-漕河泾开发区</div>
								<div class="line">|</div>
								<div class="time">2024年8月1日 12:30</div>
							</div>
						</li>
						<li>
							<div class="list">
								<div class="drop-new"></div>
								<div class="topic">电能</div>
								<div class="title">上海市松岳电源科技有限公司</div>
								<div class="cl"></div>
							</div>
							<div class="description mf10">
								<div class="address">上海市-漕河泾开发区</div>
								<div class="line">|</div>
								<div class="time">2024年8月1日 12:30</div>
							</div>
						</li>
					</div>
				</el-card>
			</el-col>
			<el-col :span="8">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/news.png" /></div>
							<div class="title">今日招商快讯</div>
							<el-link :underline="false" style="float: right" href="/#/home/business"><div class="more"></div></el-link>
						</div>
					</template>
					<div class="content">
						<li>
							<div class="list">
								<div class="drop-new"></div>
								<div class="topic">投资</div>
								<div class="title">总投资53亿元！江苏华晨光电显示科技项目开工主要从事高精密液...</div>
								<div class="cl"></div>
							</div>
							<div class="description">
								<div class="address">发布来源：财经日报</div>
								<div class="line">|</div>
								<div class="time">时间：2024-08-01 12:30</div>
							</div>
						</li>
						<li>
							<div class="list">
								<div class="drop-new"></div>
								<div class="topic">招商</div>
								<div class="title">生成式AI带来更多计算需求 AMD二季度营收58.35亿美元，数据中...</div>
								<div class="cl"></div>
							</div>
							<div class="description">
								<div class="address">发布来源：财经日报</div>
								<div class="line">|</div>
								<div class="time">时间：2024-08-01 12:30</div>
							</div>
						</li>
						<li>
							<div class="list">
								<div class="drop-new"></div>
								<div class="title">英伟达发布人形机器人训练平台，字节跳动等成为首批加入企业</div>
								<div class="cl"></div>
							</div>
							<div class="description">
								<div class="address">发布来源：财经日报</div>
								<div class="line">|</div>
								<div class="time">时间：2024-08-01 12:30</div>
							</div>
						</li>
					</div>
				</el-card>
			</el-col>
			<el-col :span="8">
				<el-card>
					<div class="card-header pd">
						<div class="icon"><el-image src="/src/assets/work.png" /></div>
						<div class="title">我的工作台</div>
					</div>
					<div class="work">
						<div class="time">
							<li>
								<div class="date-time">10:26:32</div>
								<div class="date">2024年8月6日</div>
							</li>
							<li>
								<div class="address-week">
									<div class="address"><el-image class="address-image" src="/src/assets/address.png" />上海市-虹口区</div>
									<div class="week">星期五</div>
								</div>
								<div></div>
							</li>
						</div>
						<div class="icon">
							<li>
								<el-image src="/src/assets/mycompany.png" />
								<div class="title">我的企业</div>
							</li>
							<li>
								<el-image src="/src/assets/myproject.png" />
								<div class="title">我的项目</div>
							</li>
							<li>
								<el-image src="/src/assets/mychain.png" />
								<div class="title">我的产业链</div>
							</li>
							<li>
								<el-image src="/src/assets/myreport.png" />
								<div class="title">我的尽调</div>
							</li>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="10">
			<el-col :span="8">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/financing.png" /></div>
							<div class="title">最新融资</div>
							<el-link :underline="false" style="float: right" href="/#/chain/invest"><div class="more"></div></el-link>
						</div>
					</template>
					<div class="content financing">
						<li>
							<div class="image"><el-image src="/src/assets/rebort.png"></el-image></div>
							<div class="project">机器人智能制造产业园项目</div>
							<div class="money">融资：200万</div>
							<div class="company">上海资源回收有限公司</div>
						</li>
						<li>
							<div class="image"><el-image src="/src/assets/rebort.png"></el-image></div>
							<div class="project">机器人智能制造产业园项目</div>
							<div class="money">融资：200万</div>
							<div class="company">上海资源回收有限公司</div>
						</li>
						<li>
							<div class="image"><el-image src="/src/assets/rebort.png"></el-image></div>
							<div class="project">机器人智能制造产业园项目</div>
							<div class="money">融资：200万</div>
							<div class="company">上海资源回收有限公司</div>
						</li>
					</div>
				</el-card>
			</el-col>
			<el-col :span="8">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/innovate.png" /></div>
							<div class="title">最新创新事件</div>
							<el-link :underline="false" style="float: right" href="/#/chain/innovate"><div class="more"></div></el-link>
						</div>
					</template>
					<div class="content innovate">
						<li>
							<div class="logo"><el-image src="/src/assets/logo.jpg"></el-image></div>
							<div class="company">
								<div class="title">南方电网综合能源股份有限公司</div>
								<div class="view">事件详情>></div>
							</div>
							<div class="money">50万人民币</div>
							<div class="date">&nbsp;&nbsp;|&nbsp;&nbsp;天使轮&nbsp;&nbsp;|&nbsp;&nbsp;2024年8月1日</div>
						</li>
						<li>
							<div class="logo"><el-image src="/src/assets/logo.jpg"></el-image></div>
							<div class="company">
								<div class="title">南方电网综合能源股份有限公司</div>
								<div class="view">事件详情>></div>
							</div>
							<div class="money">50万人民币</div>
							<div class="date">&nbsp;&nbsp;|&nbsp;&nbsp;天使轮&nbsp;&nbsp;|&nbsp;&nbsp;2024年8月1日</div>
						</li>
						<li>
							<div class="logo"><el-image src="/src/assets/logo.jpg"></el-image></div>
							<div class="company">
								<div class="title">南方电网综合能源股份有限公司</div>
								<div class="view">事件详情>></div>
							</div>
							<div class="money">50万人民币</div>
							<div class="date">&nbsp;&nbsp;|&nbsp;&nbsp;天使轮&nbsp;&nbsp;|&nbsp;&nbsp;2024年8月1日</div>
						</li>
					</div>
				</el-card>
			</el-col>
			<el-col :span="8">
				<el-link :underline="false" style="width: 49.5%"><el-image src="/src/assets/report.png" /></el-link>
				<el-link :underline="false" style="width: 49.5%; float: right" href="/#/report/company"><el-image src="/src/assets/company.png" /></el-link>
				<el-link :underline="false" style="width: 100%"><el-image src="/src/assets/dingzhi.png" /></el-link>
			</el-col>
		</el-row>
		<el-row :gutter="10">
			<el-col :span="8">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/numerical.png" /></div>
							<div class="title">今日数商</div>
							<div class="more"></div>
						</div>
					</template>
					<div class="content numerical">
						<li>
							<div class="list">
								<div class="title">230个新质生产力项目详细名单</div>
							</div>
							<div class="description">
								<div class="address">园域信息发布</div>
								<div class="line">|</div>
								<div class="time">2024-08-01</div>
							</div>
						</li>
						<li style="float: right">
							<div class="list">
								<div class="title">230个新质生产力项目详细名单</div>
							</div>
							<div class="description">
								<div class="address">园域信息发布</div>
								<div class="line">|</div>
								<div class="time">2024-08-01</div>
							</div>
						</li>
						<li>
							<div class="list">
								<div class="title">230个新质生产力项目详细名单</div>
							</div>
							<div class="description">
								<div class="address">园域信息发布</div>
								<div class="line">|</div>
								<div class="time">2024-08-01</div>
							</div>
						</li>
						<li style="float: right">
							<div class="list">
								<div class="title">230个新质生产力项目详细名单</div>
							</div>
							<div class="description">
								<div class="address">园域信息发布</div>
								<div class="line">|</div>
								<div class="time">2024-08-01</div>
							</div>
						</li>
					</div>
				</el-card>
			</el-col>
			<el-col :span="8">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/meeting.png" /></div>
							<div class="title">重点企业</div>
							<el-link :underline="false" style="float: right" href="/#/chain/company/list"><div class="more"></div></el-link>
						</div>
					</template>
					<div class="content">
						<li>
							<div class="list">
								<div class="drop-new"></div>
								<div class="topic">化工</div>
								<div class="title">上海市松岳电源科技有限公司</div>
								<div class="time" style="float: right; margin-right: 20px">张三</div>
								<div class="cl"></div>
							</div>
						</li>
						<li>
							<div class="list">
								<div class="drop-new"></div>
								<div class="topic">化工</div>
								<div class="title">上海市松岳电源科技有限公司</div>
								<div class="time" style="float: right; margin-right: 20px">张三</div>
								<div class="cl"></div>
							</div>
						</li>
						<li>
							<div class="list">
								<div class="drop-new"></div>
								<div class="topic">化工</div>
								<div class="title">上海市松岳电源科技有限公司</div>
								<div class="time" style="float: right; margin-right: 20px">张三</div>
								<div class="cl"></div>
							</div>
						</li>
						<li>
							<div class="list">
								<div class="drop-new"></div>
								<div class="topic">化工</div>
								<div class="title">上海市松岳电源科技有限公司</div>
								<div class="time" style="float: right; margin-right: 20px">张三</div>
								<div class="cl"></div>
							</div>
						</li>
					</div>
				</el-card>
			</el-col>
			<el-col :span="8">
				<el-card>
					<template #header>
						<div class="card-header">
							<div class="icon"><el-image src="/src/assets/chain.png" /></div>
							<div class="title">产业链</div>
							<div class="more"></div>
						</div>
					</template>
					<div class="content"></div>
				</el-card>
			</el-col>
		</el-row>
		<div style="width: 100%; height: 40px"></div>
	</div>
</template>

<script setup lang="ts" name="home">
import { el } from 'element-plus/es/locale';
import { Calendar, Search } from '@element-plus/icons-vue';
import { reactive, onMounted, defineAsyncComponent } from 'vue';

const Project = defineAsyncComponent(() => import('/@/views/home/component/project.vue'));

// 页面加载时
onMounted(() => {});
</script>

<style scoped lang="scss">
.search-input {
	width: 720px;
	border-radius: 10px;
}
.el-input-group__append {
	padding: 0px !important;
	.el-button {
		background-color: #138af2 !important;
		color: #ffffff !important;
		margin-left: -25px;
		border-radius: 10px !important;
		height: 35px;
		line-height: 0px;
	}
}
.search-left {
	width: 30%;
	float: left;
	.welcome {
		padding-left: 20px;
		font-family: BDZongYi-A001;
		font-weight: normal;
		font-size: 30px;
		color: #ffffff;
		line-height: 40px;
	}
	.vip {
		padding-left: 20px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 16px;
		color: #ffffff;
		line-height: 40px;
	}
}
.search-right {
	width: 720px;
	float: left;
	.title {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 24px;
		color: #ffffff;
		line-height: 40px;
		letter-spacing: 4px;
		text-align: center;
	}
	.keywords {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 16px;
		color: #c0d9fe;
		line-height: 40px;
		text-align: center;
	}
}
.card-header.pd {
	padding: 15px 20px;
}
.card-header {
	height: 35px;
	.icon {
		float: left;
		margin-right: 15px;
	}
	.title {
		font-size: 22px;
		color: #010101;
		float: left;
	}
	.remind {
		height: 16px;
		background: #ff0000;
		border-radius: 6px 6px 6px 0px;
		float: left;
		color: #ffff;
		margin-left: 10px;
		text-align: center;
		padding: 0px 5px;
		font-size: 12px;
	}
	.more {
		background-image: url('/src/assets/more.png');
		width: 16px;
		height: 14px;
		float: right;
		margin-top: 10px;
		background-size: 100% 100%;
	}
}
.content {
	min-height: 235px;
	li:hover {
		background-color: rgba(24, 144, 255, 0.1);
	}
	li {
		list-style: none;
		height: auto;
		line-height: 30px;
		padding: 10px 0px 10px 20px;
		.list {
			height: 30px;
			.drop-new {
				background-color: #efa151;
				float: left;
				width: 8px;
				height: 8px;
				border-radius: 3px;
				margin-top: 11px;
			}
			.topic {
				height: 22px;
				background: linear-gradient(140deg, #ff3334, #fe7527);
				border-radius: 0px 6px 0px 6px;
				float: left;
				color: #fff;
				text-align: center;
				line-height: 22px;
				font-size: 14px;
				margin-left: 15px;
				padding: 0 8px;
				margin-top: 4px;
			}
			.title {
				height: 17px;
				font-weight: 400;
				font-size: 16px;
				color: #000000;
				float: left;
				margin-left: 10px;
			}
			.time {
				color: #999999;
			}
		}
		.description {
			height: 20px;
			color: #999999;
			margin-left: 10px;
			.address {
				float: left;
				margin-left: 10px;
			}
			.line {
				float: left;
				margin-left: 10px;
			}
			.time {
				float: left;
				margin-left: 10px;
			}
		}
	}
}
.innovate {
	li {
		height: 79px;
		.logo {
			width: 70px;
			height: 48px;
			text-align: center;
			border: 1px solid #f0f0f0;
			border-radius: 3px;
			float: left;
			.el-image {
				max-width: 45px;
				max-height: 45px;
			}
		}
		.company {
			font-weight: 400;
			font-size: 16px;
			color: #000000;
			line-height: 25px;
			width: 490px;
			height: 25px;
			float: right;
			.title {
				float: left;
			}
			.view {
				width: 80px;
				height: 20px;
				background: #ebf3ff;
				border-radius: 2px;
				font-weight: 400;
				font-size: 12px;
				color: #4997fd;
				float: left;
				height: 25px;
				line-height: 25px;
				text-align: center;
				margin-left: 20px;
			}
		}
		.money {
			margin-left: 12px;
			color: #138af2;
			float: left;
		}
		.date {
			float: left;
			color: #cccccc;
		}
	}
}
.financing {
	li {
		font-family: Microsoft YaHei;
		font-weight: 400;
		width: 33.33%;
		float: left;
		padding-left: 2%;
		.image {
			width: 172px;
			height: 94px;
			.el-image {
				width: 172px;
				height: 94px;
				border-radius: 4px;
			}
		}
		.project {
			width: 165px;
			font-size: 16px;
			color: #000000;
			line-height: 26px;
			margin-top: 10px;
		}
		.money {
			font-size: 14px;
			color: #4792fc;
			line-height: 26px;
			margin-top: 8px;
		}
		.company {
			font-size: 14px;
			color: #999999;
			line-height: 26px;
		}
	}
}
.numerical {
	padding: 10px 20px;
	li {
		width: 49%;
		float: left;
		padding: 15px 10px 15px 10px;
		margin-top: 10px;
		background-color: rgba(24, 144, 255, 0.1);
		border-left: 4px solid #3a8fea;
		border-radius: 4px;
	}
	li:hover {
		border-left: 4px solid #eb623b;
		background-color: rgba(255, 244, 242, 1);
	}
}
.work {
	min-height: 265px;
	.time {
		height: 85px;
		li {
			list-style: none;
			padding-top: 10px;
			width: 26%;
			float: left;
			font-family: Microsoft YaHei;
			.date-time {
				height: 45px;
				text-align: right;
				font-weight: 400;
				font-size: 22px;
				color: #000000;
			}
			.date {
				height: 40px;
				text-align: right;
				font-weight: 400;
				font-size: 14px;
				color: #999999;
			}
			.address-week {
				float: left;
				.address {
					color: rgba(75, 155, 253, 1);
				}
				.week {
					font-weight: 400;
					font-size: 14px;
					color: #999999;
					margin-left: 5px;
					margin-top: 10px;
				}
			}
		}
		li:last-child {
			width: 44%;
			padding-left: 30px;
		}
	}
	.icon {
		float: left;
		margin-top: 20px;
		width: 100%;
		li {
			list-style: none;
			width: 25%;
			float: left;
			text-align: center;
			.title {
				font-size: 16px;
				color: #000000;
				margin-top: 10px;
			}
		}
		li:last-child {
			margin-right: 0px;
		}
	}
}
:deep(.el-card .el-card__body) {
	padding: 0px !important;
}
.report {
	background-image: url('/src/assets/report.png');
}
.home-container {
	overflow: hidden;
}
.el-row {
	margin-top: 10px;
}
.cl {
	clear: both;
}
</style>
